// 公司动态
<template>
  <div class="Company-dynamics" style="height: 100%">
    <el-card style="width: 750px; height: 900px; float: left">
      <!-- 左侧 -->
      <div
        v-for="item in menus"
        :key="item.id"
        style="padding: 0px; margin: 0px"
      >
        <!-- 左边图片部分 -->
        <el-row type="flex" class="row-bg">
          <el-col>
            <!-- 右边标题和简介 -->
            <div class="article-mid">
              <router-link :to="'/home/newsinfo/' + item.id">
                <h2 style="color:black">
                  {{ item.title }}
                </h2> </router-link
              ><br />
              <p class="intro">
                {{ item.content }}
              </p>
              <!-- 文章简介下四个显示的小标签 -->
              <div class="display-function">
                <el-tag size="medium" type="info">点赞数量</el-tag>
                <el-tag size="medium" type="info">评论数量</el-tag>
                <el-tag size="medium" type="info">阅读数量</el-tag>
                <el-tag size="medium" type="info">发布日期</el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
        <hr />
      </div>
    </el-card>
    <!-- 右侧 -->
    <div class="model-right">
      <div class="right-header" style="width: 22.67px; height: 22.67px">
        <img :src="iii" style="height: 22.67px; width: 22.67px" />
      </div>
      <div
        style="
          border-bottom: 0.02rem solid #d6d6d6;
          padding-bottom: 0.4rem;
          margin-bottom: 15px;
        "
      >
        <p class="tit">最新动态</p>
      </div>
      <!-- 右侧正文 -->
      <div class="block" v-for="ss in sss" :key="ss.id">
        <el-timeline>
          <el-timeline-item :timestamp="ss.data" placement="top">
            <router-link to="">
              <p class="right-intro">{{ ss.introduce }}</p>
            </router-link>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      iii: require("./img/zxgx_tit.jpg"),
      // 文章数组
      menus: [
        {
          id: 1,
          title: "大奉打更人",
          content:
            "浩瀚的宇宙中，一片星系的生灭，也不过是刹那的斑驳流光。仰望星空，总有种结局已注定的伤感，千百年后你我在哪里？家国，文明火光，地球，都不过是深空中的一粒尘埃。星空一瞬，人间千年。虫鸣一世不过秋，你我一样在争渡。深空尽头到底有什么？",
        },
        {
          id: 2,
          title: "圣墟",
          content:
            "在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角……",
        },
        {
          id: 3,
          title: "这游戏也太真实了",
          content:
            "这游戏也太真实了叭！怎么打着打着队友的衣服就没了？什么？你问我这游戏正经不？当然正经了！搬砖、跑腿、捡垃圾、送快递……公司最多能让你体会到996的艰辛，在这里你能体会到超级加倍的007。还有比这更真实的游戏？好了，不废话了，伟大的管理者大人喊我去搬砖了。那位大人说了，只要我们献上自己的肝，下个月他又能换一套全新的动力甲，到时候带我们开全新的地图，去广阔的废土捡更多的垃圾！……正经的简介：穿越到废土世界的楚光发现，自己解锁了避难所系统，能够从自己穿越之前的世界召唤名为“玩家”的生物。从那天开始，整个废土都不正经了。",
        },
        {
          id: 4,
          title: "斗破苍穹",
          content:
            "这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。……",
        }, {
          id: 5,
          title: "夜的命名术 ",
          content: "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分界。钢铁与身体，过去与未来这里，表世界与里世界并存，面前的一切，像是时间之墙近在眼前。黑暗逐渐笼罩。可你要明白啊我的朋友，我们不能用温柔去应对黑暗，要用火。"
        }, {
          id: 6,
          title: "大奉打更人",
          content:
            "浩瀚的宇宙中，一片星系的生灭，也不过是刹那的斑驳流光。仰望星空，总有种结局已注定的伤感，千百年后你我在哪里？家国，文明火光，地球，都不过是深空中的一粒尘埃。星空一瞬，人间千年。虫鸣一世不过秋，你我一样在争渡。深空尽头到底有什么？",
        },
        {
          id: 7,
          title: "圣墟",
          content:
            "在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角……",
        },
        {
          id: 8,
          title: "这游戏也太真实了",
          content:
            "这游戏也太真实了叭！怎么打着打着队友的衣服就没了？什么？你问我这游戏正经不？当然正经了！搬砖、跑腿、捡垃圾、送快递……公司最多能让你体会到996的艰辛，在这里你能体会到超级加倍的007。还有比这更真实的游戏？好了，不废话了，伟大的管理者大人喊我去搬砖了。那位大人说了，只要我们献上自己的肝，下个月他又能换一套全新的动力甲，到时候带我们开全新的地图，去广阔的废土捡更多的垃圾！……正经的简介：穿越到废土世界的楚光发现，自己解锁了避难所系统，能够从自己穿越之前的世界召唤名为“玩家”的生物。从那天开始，整个废土都不正经了。",
        },
        {
          id: 9,
          title: "斗破苍穹",
          content:
            "这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。……",
        }, {
          id: 10,
          title: "夜的命名术 ",
          content: "蓝与紫的霓虹中，浓密的钢铁苍穹下，数据洪流的前端，是科技革命之后的世界，也是现实与虚幻的分界。钢铁与身体，过去与未来这里，表世界与里世界并存，面前的一切，像是时间之墙近在眼前。黑暗逐渐笼罩。可你要明白啊我的朋友，我们不能用温柔去应对黑暗，要用火。"
        },
      ],
      //图片地址
      verifyCode: require("./img/125855Qm4nr.jpg"),
      sss: [{
        id: 1,
        introduce: "都美竹发文让吴亦凡退圈",
        data: "2021.7.26"
      }, {
        id: 2,
        introduce: "吴亦凡工发声",
        data: "2021.7.28"
      }, {
        id: 3,
        introduce: "吴亦凡妈妈告都美竹敲诈勒索",
        data: "2021.7.29"
      }, {
        id: 4,
        introduce: "如何看待吴亦凡被刑拘",
        data: "2021.8.1"
      }, {
        id: 5,
        introduce: " 吴亦凡女粉丝去公安局探视！门外大喊大闹被拦，仍不相信吴亦凡有罪太离谱，吴亦凡的八字偏弱，伤官格，好色之徒一枚。",
        data: "2021.8.4"
      }
      ]
    }
  }
}
</script>

<style>
/* 左侧宽度 */
.model-left {
  width: 300px;
  float: left;
  color: #4252729f;
}
/* 右侧宽度 */
.model-right {
  width: 320px;
  height: 800px;
  float: right;
  margin-right: 100px;
}
.right-header {
  background-color: #21b8dd;
  float: left;
  margin: 0;
  padding: 0;
}

/* 最新动态 */
.model-right .tit {
  font-size: 0.88rem;
  /* line-height: 0.3rem; */
  color: #0d5c70;
  /* text-indent: 0.18rem; */
  padding-left: 46px;
  margin: 0%;
  height: 1.7rem;
}

.el-timeline-item {
  border-left: 1px solid #cfcfcf;
  margin-left: 10px;
  /* padding-bottom: 0.2rem; */
}

.el-timeline-item__content {
  margin-left: -10px;
  color: #303133;
  /* font-size: 14px; */
  line-height: 16px;
  overflow: hidden;
  /* height: 40px; */
  /* margin-bottom: 3px; */
}

/* 右侧时间栏字体 */
.right-intro {
  font-size: 14px;
  overflow: hidden;
  /* height: 20px !important; */
  padding-left: 10px;
  color: rgb(26, 18, 18);
}
/* 时间栏的小圆圈 */
.el-timeline-item__node--normal {
  left: -6px !important;
}
</style>